@uppy/status-bar

Basic Setup

This code demonstrates how to set up the @uppy/status-bar plugin with Uppy. It initializes Uppy and uses the StatusBar plugin, attaching it to the body of the document and configuring it to hide after the upload is finished.

const Uppy = require('@uppy/core');
const StatusBar = require('@uppy/status-bar');

const uppy = Uppy();
uppy.use(StatusBar, {
  target: 'body',
  hideAfterFinish: true
});

Customizing Status Bar

This code shows how to customize the status bar by changing its target element, keeping it visible after the upload is finished, and showing detailed progress information.

const Uppy = require('@uppy/core');
const StatusBar = require('@uppy/status-bar');

const uppy = Uppy();
uppy.use(StatusBar, {
  target: '#upload-status',
  hideAfterFinish: false,
  showProgressDetails: true
});

Handling Upload Events

This code demonstrates how to handle upload events such as 'upload-success' and 'upload-error' with Uppy and the StatusBar plugin. It logs the results of successful uploads and errors to the console.

const Uppy = require('@uppy/core');
const StatusBar = require('@uppy/status-bar');

const uppy = Uppy();
uppy.use(StatusBar, {
  target: 'body'
});

uppy.on('upload-success', (file, response) => {
  console.log('Upload successful:', file, response);
});

uppy.on('upload-error', (file, error) => {
  console.error('Upload error:', file, error);
});